<template>
  <div id="regContainer">
    <div id="regContent">
      <div id="textLine">
        <p><span class="lineSpan01">注册用户</span> 18,388,462+</p>
      </div>
      <div id="borderLine"><img src="../assets/signin/lineBg_new.jpg"></div>
      <div id="regBox">
        <div id="phone-mail-register" style="display: block;padding-top: 35px">
          <div id="phone-mail-text">
            <div class="reg-text">手机/邮箱</div>
            <input id="p-m-text" type="text" placeholder="请输入手机号码或邮箱" v-model="username">
          </div>
          <div id="password-text">
            <div class="reg-text">密码</div>
            <input id="p-text" type="password" placeholder="4-20个字符,区分大小写" v-model="password">
            <div id="hidePassword" @click="showPassword()"><img id="seeHide" src="../assets/signin/seekey.png"></div>
          </div>
          <div id="agree">
            <div class="reg-text"></div>
          </div>
          <button id="registerBtn" @click="freeRegistration">免费注册</button>
          <div class="straight-reg">已有帐号?<a href="" @click="$router.push('/login')">直接登录</a></div>
        </div>
        <div id="weChatRegister" style="display: none">
          <div id="weChatImg"><img src="../assets/signin/weChatImg.png"></div>
          <div class="straight-reg" id="straight-reg">已有帐号? <a href="" @click="$router.push('/login')">直接登录</a></div>
        </div>
      </div>
    </div>
    <div id="regFoot">
      <div id="foot_foot">
        <a href="#" id="f-f-img1"><span class="f-f-span1">粤公网安备 44010502000715号</span></a>
        <span class="f-f-span2"> Copyright © 2010-2019 广东海洋大学</span>
        <a href="#"><span class="f-f-span3">粤ICP备10235580号</span></a>
        <a href="#" class="f-f-img2"><img src="../assets/signin/wang.png"></a>
        <a href="#" class="f-f-img2"><img src="../assets/signin/xing.png"></a>
        <a href="#" class="f-f-img2"><img src="../assets/signin/ke.png"></a>
      </div>
    </div>
  </div>
</template>

<script>
  import {registerApi} from "@/api/station/login";

  export default {
    name: "Register",
    data() {
      return {
        username: '',
        password: '',

        a: 1,
        b: 1,
        c: 1,

        weChatText: null,
        normalText: null,
        changeRegisterImg: null,
        weChatRegister: null,
        agreeImg: null,
        seeHide: null,
      }
    },
    mounted() {
      this.weChatText = document.getElementById("weChatText")
      this.normalText = document.getElementById("normalText")
      this.changeRegisterImg = document.getElementById("changeRegisterImg")
      this.weChatRegister = document.getElementById("weChatRegister")
      this.agreeImg = document.getElementById("agreeImg")
      this.seeHide = document.getElementById("agreeImg")
    },
    methods: {
      freeRegistration() {
        let data = {
          username: this.username,
          password: this.password,
        }
        if (!data.username || !data.password) {
          this.$errorMsg('请输入注册的账号密码？')
          return
        }
        registerApi(data).then(result => {
          if (result.status === 200) {
            this.$successMsg(result.message)
            this.$router.push({name: 'login'})
          } else {
            this.$errorMsg(result.message)
          }
        }).catch(err => {
          this.$errorMsg(err.response.message)
        })
      },

      changRegisterWay() {
        if (this.a === 1) {
          this.weChatText.style.display = "none";
          this.normalText.style.display = "block";
          this.changeRegisterImg.src = "/assets/login/userLogin01.png";
          document.getElementById("phone-mail-register").style.display = "none";
          this.weChatRegister.style.display = "block";
          this.a++;
        } else {
          this.weChatText.style.display = "block";
          this.normalText.style.display = "none";
          this.changeRegisterImg.src = "/assets/login/wxLogin01.png";
          document.getElementById("phone-mail-register").style.display = "block";
          this.weChatRegister.style.display = "none";
          this.a--;
        }
      },
      showPassword() {
        if (this.b === 1) {
          document.getElementById("p-text").type = "text";
          this.seeHide.src = "/assets/signin/secret.png";
          this.b++;
        } else {
          document.getElementById("p-text").type = "password";
          this.seeHide.src = "/assets/signin/seekey.png";
          this.b--;
        }
      },
      clickAgree() {
        if (this.c === 1) {
          this.agreeImg.src = "/assets/signin/choose.png";
          this.c++;
        } else {
          this.agreeImg.src = "";
          this.c--;
        }
      }
    }
  };
</script>
